<template>
	<el-dialog
		:before-close="handleClose"
		:close-on-click-modal="false"
		:title="$t('common.components.reset_password')"
		:visible.sync="elDialog"
		center
		width="500px"
		class="update-pass"
		:destroy-on-close="true"
		@close="handleClose"
	>
		<el-form
			ref="passDialogForm"
			:model="passDialogForm"
			:rules="passDialogFormRules"
			label-width="auto"
		>
			<PasswordWithEye
				:label="$t('common.components.new_password')"
				prop="password"
				:form="passDialogForm"
				:placeholder="$t('system.account_settings.6-11pwd')"
				@handleInput="passDialogForm.password = $event"
			></PasswordWithEye>

			<PasswordWithEye
				:label="$t('common.components.comfirm_password')"
				prop="passwordAgain"
				:form="passDialogForm"
				:placeholder="$t('system.account_settings.6-11pwd')"
				@handleInput="passDialogForm.passwordAgain = $event"
			></PasswordWithEye>
		</el-form>
		<span slot="footer" class="elDialog-footer">
			<el-button @click="handleClose">
				{{ $t('common.cancel') }}
			</el-button>
			<el-button
				type="primary"
				:loading="loading"
				@click="commitPassDialog"
			>
				{{ $t('common.confirm') }}
			</el-button>
		</span>
	</el-dialog>
</template>

<script>
import { testStringLength, testSpecial, testPassword611 } from '@/utils/test'
import PasswordWithEye from '@/components/PasswordWithEye'
import dataHandle from '@/utils/encrypt'
import md5 from 'js-md5'
export default {
	name: 'UpdatePass',
	components: {
		PasswordWithEye
	},
	props: {
		dialog: Boolean,
		userName: {
			type: String,
			default: ''
		},
		agentid: {
			type: [Number, String],
			default: 0
		},
		isNum: Boolean,
		loading: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			elDialog: false,
			passDialogForm: { password: '', passwordAgain: '' }
		}
	},
	computed: {
		passDialogFormRules() {
			const validatePass = (rule, value, callback) => {
				const err = new Error(
					this.$t('system.account_settings.6-11pwd')
				)
				if (value === '') {
					callback(err)
				} else if (!testStringLength(value, { min: 6, max: 11 })) {
					callback(err)
				} else if (!testPassword611(value)) {
					callback(err)
				} else if (!testSpecial(value)) {
					callback(err)
				} else {
					if (this.passDialogForm.passwordAgain !== '') {
						this.$refs.passDialogForm.validateField('passwordAgain')
					}
					callback()
				}
			}
			const validateRePass = (rule, value, callback) => {
				const err = new Error(
					this.$t('system.account_settings.6-11pwd')
				)
				if (value === '') {
					callback(err)
				} else if (!testStringLength(value, { min: 6, max: 11 })) {
					callback(err)
				} else if (!testPassword611(value)) {
					callback(err)
				} else if (!testSpecial(value)) {
					callback(err)
				} else if (value !== this.passDialogForm.password) {
					callback(new Error(this.$t('common.no_match')))
				} else {
					callback()
				}
			}

			return {
				password: [
					{ required: true, validator: validatePass, trigger: 'blur' }
				],
				passwordAgain: [
					{
						required: true,
						validator: validateRePass,
						trigger: 'blur'
					}
				]
			}
		}
	},
	watch: {
		dialog(val) {
			this.elDialog = val
		}
	},
	methods: {
		handleClose(done) {
			this.$refs.passDialogForm.resetFields()
			this.$emit('update:dialog', false)
		},
		commitPassDialog() {
			const data =
				dataHandle.decryptData(window.localStorage.getItem('c2')) || ''
			const pwd = data ? String(JSON.parse(data)) : ''

			this.$refs.passDialogForm.validate((valid) => {
				if (valid) {
					const params = {
						id: this.agentid,
						pwd: md5(this.userName.trim() + pwd.trim()),
						newPwd: md5(
							this.userName.trim() +
								this.passDialogForm.password.trim()
						),
						resPwd: md5(
							this.userName.trim() +
								this.passDialogForm.passwordAgain.trim()
						)
					}
					this.$emit('updatePassword', params)
					// this.$parent
					// 	.updatePassword({
					// 		id: this.agentid,
					// 		pwd: md5(this.userName.trim() + pwd.trim()),
					// 		newPwd: md5(
					// 			this.userName.trim() +
					// 				this.passDialogForm.password.trim()
					// 		),
					// 		resPwd: md5(
					// 			this.userName.trim() +
					// 				this.passDialogForm.passwordAgain.trim()
					// 		)
					// 	})
					// 	.then((_) => {
					// 		this.handleClose()
					// 	})
				}
			})
		}
	}
}
</script>
